<template>
    <div class="menu-demo">
        <a-menu :style="{ width: '200px', height: '100%' }" :default-open-keys="['/layout/home1']"
            :default-selected-keys="['/layout/home1']" show-collapse-button breakpoint="xl" @collapse="onCollapse"
            @menu-item-click="onMenuItemClick">
            <a-menu-item key="/layout/home1">
                <template #icon><icon-apps></icon-apps></template>
                渐变颜色与动态光环
            </a-menu-item>
            <a-menu-item key="/layout/home2">
                <template #icon><icon-apps></icon-apps></template>
                点聚合与动态墙
            </a-menu-item>
            <a-menu-item key="/layout/home3">
                <template #icon><icon-apps></icon-apps></template>
                行政区
            </a-menu-item>
            <a-menu-item key="/layout/home4">
                <template #icon><icon-apps></icon-apps></template>
                3D模型
            </a-menu-item>
            <a-menu-item key="/layout/home5">
                <template #icon><icon-apps></icon-apps></template>
                动态水面与公告牌
            </a-menu-item>
        </a-menu>
        <router-view />
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { IconApps } from '@arco-design/web-vue/es/icon';
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const onCollapse = (collapsed: boolean) => {
    console.log(collapsed);
};

const onMenuItemClick = (e: any) => {
    console.log(e);
    router.replace({ path: e })
};

</script>

<style lang="scss">
.menu-demo {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    background-color: var(--color-neutral-2);
    display: flex;
}
</style>